@import "media-queries";

.pay {
  margin: 1rem 2rem;
  .mpy-pay-hd {
    margin-bottom: 1rem;
    border: 0.1rem solid $mainColor;
    p {
      color: $AuxiliaryFontBlackColor;
      padding: 0.5rem;
      font-size: 1.2rem;
      margin: 0;
    }
  }
  .mpy-pay-bd {
    border-top: 0.1rem solid #cccccc;
    .mpy-pay-bd-item {
      display: block;
      margin: 0;
      font-size: 0;
      border-bottom: 0.1rem solid #cccccc;
      .payMode {
        display: none;
      }

      span {
        padding: 0;
        color: $mainFontColor;
        font-size: 1.2rem;
        line-height: 3rem;
        display: inline-block;

        img {
          width: 1.4rem;
          height: 1.4rem;
          margin-right: 1rem;
        }
      }
      .mpy-pay-bd-item-right {
        float: right;
        position: relative;
        padding-right: 2rem;

        height: 3rem;
        .payMode-status {
          position: absolute;
          width: 1.4rem;
          height: 1.4rem;
          top: 50%;
          margin-top: -0.7rem;
          right: 0;
          background: url("../wimg/icon/icon-select.svg");
        }
      }
      .pay-img{
        display: none;
        width: 15rem;
        height: 15rem;
        margin: 1rem auto;
      }
      .payMode:checked +.mpy-pay-bd-box{
        .pay-img{
          display: block;
        }
        .payMode-status {
          background: url("../wimg/icon/icon-selected.svg");
        }
      }

    }

  }
  .mpy-pay-ft {
    margin: 1rem auto;
  }
}